<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		apiGetUserInfo,
		apiUserUpdate
	} from '../../api/user.js'

	let response = null
	let showPopup = ref(false)
	let modifyTitle = ref('')
	let newValue = ref('')
	let person = ref({ // 用于获取数据的姓名和头像
		name: '',
		avatar: '',
		username: '',
		email: '',
		career: '',
		organization: '',
		age: ''
	})

	onMounted(async () => { // 组件渲染前，发起获取数据请求，并把数据渲染到组件上
		console.log("111")
		response = await apiGetUserInfo()
		console.log("response",response)
		person.value.name = response.data.name
		person.value.avatar = response.data.avatar
		person.value.username = response.data.username
		person.value.email = response.data.email
		person.value.career = response.data.career
		person.value.organization = response.data.organization
		person.value.age = response.data.age
		console.log(person)
		console.log(person.value.name)
	})
	console.log("222")


	const goto = () => {
		uni.redirectTo({
			url: '/pages/individual/individual'
		})
	}

	const show = (title) => {
		newValue.value = ''
		showPopup.value = true
		modifyTitle.value = title
	}

	const confirmEdit = async () => {
		showPopup.value = false
		console.log(modifyTitle.value)
		if (modifyTitle.value === '用户昵称') {
			person.value.name = newValue.value
		} else if (modifyTitle.value === '年龄') {
			person.value.age = newValue.value
		} else if (modifyTitle.value === '单位') {
			person.value.organization = newValue.value
		} else if (modifyTitle.value === '职业') {
			person.value.career = newValue.value
		}
		// responose = await apiUserUpdate()
		// console.log(response)
		// person.value.name = response.data.name
		// person.value.avatar = response.data.avatar
		// person.value.username = response.data.username
		// person.value.email = response.data.email
		// person.value.carrer = response.data.carrer
		// person.value.organization = response.data.organization
		// person.value.age = response.data.age
		modifyTitle.value = ''
	}
	
	const goBack =  () => {
		console.log("点击goBack")
		if (person.value.name != response.data.name || person.value.career != response.data.career || person.value.organization != response.data.organization || person.value.age != response.data.age) {
			 uni.showModal({
			        title: '提示',
			        content: '确认是否修改信息',
			        success: function (res) {
			          if (res.confirm) {
						  uni.request({
						  		url: '/applet/user/update',
						  		method: 'PUT',
						  		data: {
						  			"name": person.value.name,
									"career": person.value.career,
									"organization": person.value.organization,
									"age": person.value.age
						  		},
						  		// headers : {
						  		// 	"token": "eyJhbGciOiJIUzI1NiJ9.eyJ3eFVzZXJJZCI6OSwiZXhwIjoxNzM0NzQ4ODY1fQ.E-Szp1EyYTVWCJvCY_TXb5CukSLTTthrTkXWPcoGZCc"
						  	// 	},
						  		
						  		success: (res) => {
						  			console.log('res=',res)
									uni.reLaunch({
										url: '/pages/individual/individual'
									});
						  		},
						  		fail: (err) => {
						  			console.log(err)
						  		}
						  	}) 
			          } else if (res.cancel) {
			            console.log('用户点击取消');
			          }
			        }
			  });
		}
		else {
			uni.reLaunch({
				url: '/pages/individual/individual'
			});
		}
	}
</script>

<template>
	<view class="custom-navbar">
		<view class="back-icon" @click="goBack()">
			<img src="../../static/民族风-返回.png" alt="" class="icon" />
		</view>
		<text class="custom-title">个人资料</text>
	
	</view>
	<view class="personaldata">
		
<!-- 		<view class="box-bg">
			<uni-nav-bar dark color="#0c34ba" fixed="true" border="false" backgroundColor="#ffffff" shadow
				left-icon="left" leftText="返回" @clickLeft="goto" title="个人信息" />
		</view> -->
		<view class="box"></view>
		<view class="list-personal">
			<view class="chat-item">
				<view class="chat-content">
					<text class="title">头像</text>
				</view>
				<image class="chat-avatar" mode="aspectFit" :src="person.avatar"></image>
			</view>
			<view class="separator"></view>
			<view class="chat-item">
				<view class="chat-content">
					<text class="title">用户名</text>
				</view>
				<text class="information">{{ person.username }}</text>
			</view>
			<view class="separator"></view>
			<view class="chat-item" @click="show('用户昵称')">
				<view class="chat-content">
					<text class="title">用户昵称</text>
				</view>
				<text class="information">{{ person.name }}</text>
			</view>
			<view class="separator"></view>
			<view class="chat-item" @click="show('年龄')">
				<view class="chat-content">
					<text class="title">年龄</text>
				</view>
				<text class="information">{{ person.age }}</text>
			</view>
			<view class="separator"></view>
			<view class="chat-item" @click="show('职业')">
				<view class="chat-content">
					<text class="title">职业</text>
				</view>
				<text class="information">{{ person.career }}</text>
			</view>
			<view class="separator"></view>
			<view class="chat-item" @click="show('单位')">
				<view class="chat-content">
					<text class="title">单位</text>
				</view>
				<text class="information">{{ person.organization }}</text>
			</view>
			<view class="separator"></view>
			<view class="chat-item">
				<view class="chat-content">
					<text class="title">邮箱</text>
				</view>
				<text class="information">{{ person.email }}</text>
			</view>
		</view>
		<!-- 模态框遮罩层 -->
		<view class="modal-mask" v-if="showPopup" @click="hideModal"></view>
		<view class="container">
			<!-- <button @click="showPopup = true">修改昵称</button> -->
			<view v-if="showPopup" class="popup-nick" :style="{ borderRadius: '10px 10px 0 0' }">
				<view class="register-box">
					<view class="title-x">
						<view class="title">修改{{ modifyTitle }}</view>
						<text @click="showPopup = false" class="close-icon">X</text>
					</view>
					<view class="from1">
						<form ref="form">
							<!-- <label for="newNickName">昵称</label> -->
							<!-- <input v-model="newNickName" type="text" id="newNickName" :placeholder="`输入新{{ modifyTitle }}`" /> -->
							<input v-model="newValue" type="text" id="newNickName" :placeholder="`输入新${modifyTitle}`" />
						</form>
					</view>
					<view class="register1-btn" @click="confirmEdit">保存</view>
				</view>
			</view>
		</view>
	</view>

</template>

<style lang="scss" scoped>
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px;
		/* 导航栏高度 */
		background-color: #00BFFF;
		display: flex;
	
		justify-content: center;
		color: white;
		z-index: 999;
	
	}
	
	.icon {
		position: absolute;
		height: 80rpx;
		width: 80rpx;
		margin-top: 40px;
		margin-left: 10px;
	
	}
	
	.custom-title {
		font-size: 20px;
		/* 设置你想要的大小 */
		margin-top: 45px;
		font-weight: bold;
		margin-left: auto;
		/* 使标题向右对齐 */
		margin-right: auto;
		margin-bottom: 20rpx;
		/* 使标题向左对齐，与 margin-left: auto 配合实现居中 */
	}
	
	$nav-height: 30px;

	.personaldata {

		flex-direction: column;
		margin-top: 100rpx;

		.box-bg {
			background-color: #F5F5F5;

			.uni-nav-bar-text {
				color: black !important;
				font-size: 32rpx;
			}

		}

		.box {
			height: 360rpx;
			// background: linear-gradient(to right, #0c34ba 20%, #0cafe6);
			background: linear-gradient(to right, #beecd8 20%, #F4E2D8);
		}

		.list-personal {

			height: 700rpx;
			flex-direction: column;
			margin: 20rpx;
			flex: 1;
			border-radius: 20rpx 20rpx 0 0;
			margin-top: -180rpx;
			background: white;
			display: flex;
			flex-direction: column;
			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);

			.chat-item {
				display: flex;
				align-items: center;
				padding: 20rpx 20rpx;
				/* 调整内边距 */
			}

			.separator {
				height: 1rpx;
				width: 90%;
				background-color: #f5f6f7;
				margin-top: 10rpx;
				margin-left: 30rpx;
			}

			.chat-content {
				flex: 1;
				margin-right: 20rpx;
				/* 头像与内容的间隔 */
			}

			.title {
				font-size: 28rpx;
				/* 标题字号 */
				color: #333;
				/* 标题颜色 */
			}

			.chat-avatar {
				width: 80rpx;
				/* 头像宽度 */
				height: 80rpx;
				/* 头像高度 */
				border-radius: 50%;
				/* 如果需要圆形头像 */
				margin-left: auto;
				/* 使头像靠右 */
			}

			.information {
				color: #969799;
				font-size: 26rpx;
			}


		}

		.register-box {
			height: 400rpx;
			background: white;
			padding: 30rpx;

			.title-x {
				display: flex;
				justify-content: space-between;
			}

			.title {
				color: #646566;
				font-weight: 600;
				font-size: 52rpx;
			}

			.from1 {
				margin-top: 70rpx;
			}
		}

		.modal-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			/* 半透明黑色遮罩 */
			z-index: 1000;
			/* 确保遮罩层在最上层 */
		}

		.container {
			position: fixed;
			z-index: 1001;
			/* 确保模态框内容在遮罩层之上 */

			.popup-nick {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: white;
			}

			.register-box {
				padding: 20px;
			}

			.title-x {
				display: flex;
				justify-content: space - between;
				align-items: center;
			}


			.title {
				color: #646566;
				font-weight: 600;
				font-size: 52rpx;
			}

			.close-icon {
				font-size: 24px;
				color: #c8c9cc;
				cursor: pointer;
			}

			input {
				border: none;
				padding: 10rpx;
				border-bottom: 1rpx solid #ccc;
			}

			.register1-btn {
				height: 90rpx;
				font-size: 30rpx;
				text-align: center;
				line-height: 90rpx;
				color: white;
				border-radius: 50rpx;
				margin-top: 50rpx !important;
				margin: 0 10rpx;
				background: #1441cc;
			}
		}

		// .popup-nick {
		//   position: fixed;
		//   bottom: 0;
		//   left: 0;
		//   width: 100%;
		//   background-color: white;
		// }

		// .register-box {
		//   padding: 20px;
		// }

		// .title-x {
		//   display: flex;
		//   justify-content: space - between;
		//   align-items: center;
		// }


		// .title {
		// 	color: #646566;
		// 	font-weight: 600;
		// 	font-size: 52rpx;
		// }

		// .close-icon {
		//   font-size: 24px;
		//   color: #c8c9cc;
		//   cursor: pointer;
		// }

		// input {
		//   border: none;
		//   padding: 10rpx;
		//   border-bottom: 1rpx solid #ccc;
		// }

		// .register1-btn {
		// 	height: 90rpx;
		// 	font-size: 30rpx;
		// 	text-align: center;
		// 	line-height: 90rpx;
		// 	color: white;
		// 	border-radius: 50rpx;
		// 	margin-top: 50rpx !important;
		// 	margin: 0 10rpx;
		// 	background: #1441cc;
		// }

		// .register1-btn {
		//   background-color: #007BFF;
		//   color: white;
		//   padding: 10rpx 20rpx;
		//   text-align: center;
		//   cursor: pointer;
		//   margin-top: -100rpx;
		// }
	}
</style>